<template>
    <el-dialog v-model="compReportVisible" title="项目详情"  @opened="opened"  width="900"  @close="closeTxDialog" >
        <el-card style="margin-top: 10px;">
            <template #header>
            <div class="card-header">
                <span>项目信息</span>
            </div>
            </template>
            <el-descriptions>
                <el-descriptions-item label="项目创建时间：">{{merTask?.addTime}}</el-descriptions-item>
                <el-descriptions-item label="项目名称：">{{merTask.name}}</el-descriptions-item>
                <el-descriptions-item label="项目类型：">{{proxy?.getDicValue(merTask.classify,task_type)}}</el-descriptions-item>
                <el-descriptions-item label="项目创建者：">{{merTask?.merchantName}}</el-descriptions-item>
                <el-descriptions-item label="项目创建者编号：">{{merTask.merNo}}</el-descriptions-item>
                <el-descriptions-item label="项目审核方：">{{merTask.opName}}</el-descriptions-item>
                <el-descriptions-item label="项目审核时间：">{{merTask.opVerifyTime}}</el-descriptions-item>
                <el-descriptions-item label="项目转包方名称：">{{merTask.gsmc}}</el-descriptions-item>
                <el-descriptions-item label="项目转包方编号：">{{merTask.sydNo}}</el-descriptions-item>
                <el-descriptions-item label="项目转包时间：">{{merTask.sydVerifyTime}}</el-descriptions-item>
                <el-descriptions-item label="项目佣金：">{{getJe(merTask)}}</el-descriptions-item>
                <el-descriptions-item label="项目人数："  v-if="merTask.classify ==  2">{{merTask.limitNum}}</el-descriptions-item>
                <el-descriptions-item label="项目人数："  v-if="merTask.classify ==  1">--</el-descriptions-item>
                <el-descriptions-item label="所属行业：">{{getIndustry(merTask.industryName,1)}}</el-descriptions-item>
                <el-descriptions-item label="所属子行业：">{{getIndustry(merTask.industryName,2)}}</el-descriptions-item>
                <el-descriptions-item label="项目状态：">{{proxy?.getDicValue(merTask.taskStatus,task_status)}}</el-descriptions-item>
                <el-descriptions-item label="项目内容："><p>{{merTask.proContent}}</p></el-descriptions-item>
            </el-descriptions>
        </el-card>

        <el-card style="margin-top: 10px;">
            <template #header>
            <div class="card-header">
                <span>完工信息</span>
            </div>
            </template>
            <el-descriptions>
                <el-descriptions-item label="项目承接人：">{{enrollInfo.workerName}}</el-descriptions-item>
                <el-descriptions-item label="项目佣金：">{{proxy?.convertFenToYuan(enrollInfo.cost)}}</el-descriptions-item>
                <el-descriptions-item label="完工状态：">{{proxy?.getDicValue(enrollInfo.taskStatus,woker_task_status)}}</el-descriptions-item>
            </el-descriptions>
        </el-card>
    </el-dialog>
  </template>
  
  <script lang="ts" setup>
  import type { TaskInfo } from '../types'
  import {taskDetail} from '@/api/projectMgt/proSel/index'
  import {getTaskEnrollInfo} from "@/api/operator/txMonitor";

  const route = useRoute();  
  const { proxy } = getCurrentInstance() as ComponentInternalInstance;
  const pros = defineProps(['title','openCheck','id','item']);
  const emit = defineEmits(['dialogClose', 'dialogSubmit','flushDetail'])

  const compReportVisible= ref(false)


  compReportVisible.value = pros.openCheck;
  const closeTxDialog =()=>{
      compReportVisible.value = false;
      emit('dialogClose',{tag:1});
 }

  const MapTaskStatus = {
    0: 1,
    1: 2,
    2: 3,
    3: 4,
    4: 5,
    5: 6,
    6: 7,
    7: 8,
    8: 9,
  }
  
  const pageLoading = ref(true);

  const getIndustry = (industry,tag)=>{
    if(!industry){
        return '--';
    }
    let ids = industry.split(",")
    if(tag == 1){
        return ids[0];
    }else if(tag == 2){
        return ids[1];
    }
  }
  /**
   * TODO
   * 查询角色信息字典
   * 回显label
   * 角色信息字典名称未知
  */
  const list = toRefs<any>(proxy?.useDict("sys_role"));
  const {plat_role} =  toRefs<any>(proxy?.useDict("plat_role"));
  const {task_type} =  toRefs<any>(proxy?.useDict("task_type"));
  const {task_status} =  toRefs<any>(proxy?.useDict("task_status"));
  const {woker_task_status} =  toRefs<any>(proxy?.useDict("woker_task_status"));


  const taskItem = ref({})
  const data = ref({})
  const enrollInfo = ref({})


  const queryParams = ref({
    pageNum:1,
    pageSize:10,
    id:null
  })

  taskItem.value = pros.item;
  
  /**
   * 项目状态
  */
  const steps = computed(() => {
    const list = proxy?.useDict("task_step").task_step
    return list
  })
  
  //查询任务详情
  const getTaskDetail = ()=>{
    taskDetail(taskItem.value.id,queryParams.value).then(res=>{
        data.value = res.data;
    });

  }
  

  const getTaskEnrollInfo1 = ()=>{
    getTaskEnrollInfo({
        proSubNo:taskItem.value.proSubNo
    }).then(res=>{
        enrollInfo.value = res.data;
    });

  }

  const opened = ()=>{
    queryParams.pageNum = 1;
    queryParams.pageSize = 10;
    getTaskDetail();
    getTaskEnrollInfo1();
}
  
  
//   const { data } = useRequest(`/payment/task/${route.query.id}`, 'GET', {}, { immediate: true })
  
    const merTask = computed<TaskInfo>(() => {
        return data?.value?.merTask || {}
    })

    const getJe = (taskIt)=>{
       if(taskIt.classify == 1){
            return proxy?.convertFenToYuan(taskIt.cost) +" ~ " + proxy?.convertFenToYuan(taskIt.costMax)+"元";
       }else{
            return proxy?.convertFenToYuan(taskIt.cost) +"元";
       }
    }
    
    const logRecords = computed(() => {
        return data?.value?.logRecords || []
    })

    const enrolls =  computed(() => {
        return data?.value?.enrolls || []
    })
    
  
    const dealStep = (stepNum:Number)=>{
        if(stepNum >= 2 && stepNum <=3){
            return 2;
        }else if(stepNum >= 4 && stepNum <=5){
            return 4;
        }else if(stepNum >= 6 && stepNum <=7){
            return 5;
        }else if(stepNum > 7){
            return 6;
        }

        return stepNum;
    }
  
    const activeStep = computed(() => {
        // alert(dealStep(merTask.value?.taskStatus));
        return  MapTaskStatus[dealStep(merTask.value?.taskStatus)] || -1
    })
    
  
    onMounted(() => {
        setTimeout(() => {
            pageLoading.value = false
        }, 500);
    })

  
    watch(() => pros.openCheck, async val => {
            compReportVisible.value =  val;
        }
    );

    watch(() => pros.item, async val => {
            taskItem.value = val;
    }
);

  </script>
  
  <style >
  .el-dialog__header{
    border-bottom: 1px solid #e8e8e8;
    padding-bottom:15px;
    margin-right:0;
  }
  </style>
  